<template>
	<view class="" style="width: 100vw;height: 100vh">
	<view 
	style="min-height: 100vh">
		<!-- <image class="mart_bg" src="/static/detail/detail_bg.png" mode="scaleToFill"></image> -->
		<hx-navbar :title="info.goods_name" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<view class="container">
		<!-- 	<view class="collect_img_box">
				<view class="imgCont">
					<image :src="info.image" mode="aspectFill" class="collect_image"></image>
				</view>
				<image src="/static/index/taizi.png" mode="widthFix" class="taizi_img"></image>
			</view>
			 -->
			<view class="collect_img_box">
			
			
				<view class="">
			
					<view class="animal-box" v-if="ifformat!=='gif'">
						<view class="ani-list">
							<uni-view data-v-1a7ef5ff="" class="ani-info2 r1">
			
								<img class="an-image2" :src="info.image" alt="Your Image">
							</uni-view>
			
							<uni-view data-v-1a7ef5ff="" class="ani-info2 r1-bg"></uni-view>
							<uni-view data-v-1a7ef5ff="" class="ani-info r2"></uni-view>
			
							<uni-view data-v-1a7ef5ff="" class="ani-info2 r3-bg">
								<image class="an-image2" src="@/static/aipicture/zfsl_back.png" alt="Your Image">
							</uni-view>
							<uni-view data-v-1a7ef5ff="" class="ani-info r4"></uni-view>
							<uni-view data-v-1a7ef5ff="" class="ani-info r5"></uni-view>
							<uni-view data-v-1a7ef5ff="" class="ani-info r6"></uni-view>
			
						</view>
			
					</view>
					<view class="animal-box" v-if="ifformat==='gif'">
						<image :src="info.image" mode="aspectFill" class="collect_image">
						</image>
			
					</view>
				</view>
			
			
			
				<image src="/static/index/taizi.png" mode="widthFix" class="taizi_img"></image>
			<!-- 	<image :src="info.dizuo_img" mode="widthFix" class="taizi_img"></image> -->
			</view>
			
			
			<view class="shop" :style="[selStyle]">
				<view class="num">
					<image src="/static/shop/price_icon.png" mode="scaleToFill"></image>
					<text>{{info.exchange_point || 0}}</text>
				</view>
				<view class="name">{{info.name}}</view>
				<view class="tip">已兑{{info.has}}/库存{{info.num}}</view>
			</view>
		</view>
		<view style="height: 160rpx;"></view>
		<view class="buy" :style="[selStyle]" @click="pay">立即兑换</view>
		<uni-popup ref="rewards" type="center" :isMaskClick="false">
			<view class="rewards_box">
				<view class="rewards_title">恭喜获得新版权</view>
				<image src="/static/user/rewards_light.png" mode="widthFix" class="rewards_light"></image>
				<image :src="openItem.image" mode="aspectFill" class="reward_img"></image>
				<view class="reward_name">{{openItem.goods_name}}</view>
			</view>
			<view class="confirm_btn2" @tap="confirm">确定</view>
		</uni-popup>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				selStyle: {
					'--selectColorSize': this.$store.state.selectColorSize, //字体颜色
					'--buttonBcak': this.$store.state.buttonBcak,
				},
				id: 0,
				info: {},
					ifformat: 'png',
				openItem: {}
			}
		},
		onLoad(option) {
			if (option && option.id) {
				this.id = option.id;
				this.getShopInfo();
			} else {
				if (!this.id) {
					this.$common.errorToShow('商品失效')
					uni.navigateBack()
					return;
				}
			}
		},
		methods: {
			// 详情
			getShopInfo() {
				this.$api.getShopInfo({ id: this.id }, res => {
					if (res.status) {
						this.info = res.data;
							this.ifformat = res.data.image.substring(res.data.image.length - 3) //获取照片格式
					}
				});
			},
			pay() {
				this.$api.shopPay({ id: this.id }, res => {
					if (res.status) {
						this.$common.successToShow(res.msg, res => {
							uni.redirectTo({
								url: '/pages/shop/convert'
							});
						});
					} else {
						this.$common.errorToShow(res.msg)
					}
				});
			},
			confirm() {
				this.openItem = {};
				this.$refs.rewards.close();
				uni.navigateBack()
			},
		},
	}
</script>

<style lang="scss">
	@import "@/pages/index/detail.scss";
</style>

<style lang="scss" scoped>
	.taizi_img {
		 
				width: 560rpx;
				width: 590rpx;
				display: block;
				// margin-top: 10rpx;
				//margin: 22rpx auto ;
				margin: 85rpx auto 0;
			 
		// margin-top: 0 !important;
	}
	.shop {
		
		width: 670rpx;
		height: 195rpx;
		background: $bg-box;
		border-radius: 20rpx;
		border: 1rpx solid #FCC9CB;
		padding: 34rpx 34rpx 0;
		margin: 30rpx auto;
		.num {
			display: flex;
			align-items: center;
			image {
				width: 31rpx;
				height: 33rpx;
				display: block;
				margin-right: 5rpx;
			}
			text {
				font-size: 32rpx;
				color: #000;
				font-weight: bold;
			}
		}
		.name {
			font-size: 32rpx;
			color: #141519;
			font-weight: bold;
			margin: 7rpx 0 8rpx;
		}
		.tip {
			font-size: 24rpx;
			color:var(--selectColorSize);// #FE005A;
		}
	}
	.buy {
		width: 650rpx;
		height: 80rpx;
		background: var(--buttonBcak);//$btn-bg;
		border-radius: 100rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #ffff;
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
		z-index: 200;
	}
	
	//3D
	.3D {
		/* 让图片填充整个容器 */
		transform-style: preserve-3d;
		/* 保留3D效果 */
		transition: transform 20s;
		/* 设置旋转动画的时间 */
	}
	
	.image-container {
		perspective: 1000px;
		/* 这定义了观察者与z=0平面的距离，模拟3D效果 */
		width: 300px;
		border: 11px solid yellow;
		/* 定义图片的宽度 */
		height: 300px;
		/* 定义图片的高度 */
		margin: auto;
		/* 使图片在页面中居中 */
	
	}
	
	.rotate-image {
		width: 500rpx;
		/* 让图片填充整个容器 */
		height: 500rpx;
	
		margin: auto;
		text-align: center;
		// border:10rpx solid  #e2e2e2
	
	}
	
	.rotate-image:hover {
		transform: rotateY(360deg);
		/* 设置旋转角度 */
	}
	
	.rotate-image {
		/* ...其他样式... */
		animation: rotate 15s infinite linear;
		/* 设置一个无限循环的旋转动画 */
	}
	
	@keyframes rotate {
		from {
			transform: rotateY(0deg);
		}
	
		to {
			transform: rotateY(360deg);
		}
	}
	
	// 3D
	.animal-box {
		-webkit-perspective: 800;
		-webkit-transform-style: preserve-3d;
		perspective: 800;
		transform-style: preserve-3d;
		position: relative;
		width: 503rpx;
		height: 503rpx;
		margin: 13rpx auto;
	
	}
	
	.ani-list {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		-webkit-transform: rotateY(-50deg);
		-webkit-transform-style: preserve-3d;
		transform: rotateY(271deg); //rotateY(-50deg);
		transform-style: preserve-3d;
		-webkit-transform-origin: center;
		transform-origin: center;
		width: 500rpx;
		height: 500rpx;
		margin: 0 auto;
		animation: rotate 15s infinite linear;
		border-radius: 43rpx;
	
	}
	
	
	
	.animal-box .ani-list .r1,
	.animal-box .ani-list .r3 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-color: #dddedf;
		border: 5rpx solid #ff3936;
	}
	
	.animal-box .ani-list .r1-bg {
		top: 0px;
		width: 500rpx;
		height: 500rpx;
		-webkit-transform: translateZ(27rpx); //14px
		transform: translateZ(27rpx);
		background-color: #dddedf;
	}
	
	.animal-box .ani-list .r2 {
		top: 21rpx;
		// transform: rotateY(90deg) translateZ(248px) translateX(-13px); 
		//14px
		transform: rotateY(90deg) translateZ(492rpx) translateX(-26rpx); //-26rpx
		transform-origin: left;
		// transform: rotateY(90deg) translateZ(245px) translateX(0px);
	
		width: 50rpx;
		// height: 220px8
		height: 450rpx;
	
	}
	
	.animal-box .ani-list .r4 {
		// top: 20px;
		top: 20rpx;
		//28px
		-webkit-transform: rotateY(-90deg) translateZ(20rpx) translateX(0rpx);
		//10px
		transform: rotateY(-90deg) translateZ(20rpx) translateX(0rpx);
		width: 52rpx;
	
		// height: 230px;
	
		height: 450rpx;
	}
	
	.animal-box .ani-list .r1,
	.animal-box .ani-list .r3 {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		background-color: #dddedf;
		// border: 5rpx solid #ff3936;
		border: 5rpx solid #673DE7;
	}
	
	.animal-box .ani-list .r3-bg {
		top: 0px;
		width: 500rpx;
		height: 500rpx;
	
		-webkit-transform: rotateY(180deg) translateZ(27rpx); //14px
		transform: rotateY(180deg) translateZ(27rpx);
		background-color: #dddedf;
		border: 5rpx solid #673DE7; //red
	}
	
	.ani-info2 {
		list-style-type: none;
		position: absolute;
		//top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		text-align: center;
		// width: 249px;
		//height: 249px;
		// background: url('@/logo.png') no-repeat;
		// background-size: 100% 100%;
		background: #e8e8e8;
		-webkit-transition: -webkit-transform 2s, opacity 2s;
		-webkit-backface-visibility: visible;
		transition: opacity 2s, -webkit-transform 2s;
		transition: transform 2s, opacity 2s;
		transition: transform 2s, opacity 2s, -webkit-transform 2s;
		backface-visibility: visible;
		border-radius: 56rpx;
	}
	
	.animal-box .ani-list .ani-info {
		list-style-type: none;
		position: absolute;
		//top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		text-align: center;
		// width: 249px;
		//height: 249px;
		// background: url('@/logo.png') no-repeat;
		// background-size: 100% 100%;
		background: #e8e8e8;
		-webkit-transition: -webkit-transform 2s, opacity 2s;
		-webkit-backface-visibility: visible;
		transition: opacity 2s, -webkit-transform 2s;
		transition: transform 2s, opacity 2s;
		transition: transform 2s, opacity 2s, -webkit-transform 2s;
		backface-visibility: visible;
		border-radius: 16rpx;
	}
	
	.animal-box .ani-list .r5 {
		left: 20rpx;
		top: 16rpx;
	
		-webkit-transform: rotateX(90deg) translateZ(22rpx); //11px
		transform: rotateX(90deg) translateZ(22rpx);
		// height: 26px;
		// width: 218px;
		height: 50rpx;
	
		width: 440rpx;
	}
	
	.animal-box .ani-list .r6 {
		left: 20rpx;
		top: -25rpx;
		//	-webkit-transform: rotateX(-90deg) translateZ(236px);
		transform: rotateX(-90deg) translateZ(472rpx);
		// height: 26px;
		// width: 218px;
		height: 50rpx;
	
		width: 440rpx;
	}
	
	// 	.animal-box .ani-list .r1 .an-image, .animal-box .ani-list .r3 
	.an-image {
		width: 100%;
		height: 100%;
		margin: 0rpx auto;
		background: #ffffff;
		padding: 30rpx;
		// border:5rpx solid red;
		box-sizing: border-box;
		border-radius: 52rpx;
	
		.image {
	
			border-radius: 50rpx;
		}
	}
	
	.an-image2 {
		width: 100%;
		height: 100%;
		margin: 0rpx auto;
		background: #ffffff;
		// border:5rpx solid red;
		box-sizing: border-box;
		border-radius: 52rpx;
	
		.image {}
	}
	
	.animal-box .ani-list .r1 {
		-webkit-transform: translateZ(30rpx); //15px
		transform: translateZ(30rpx);
	}
	
</style>